<template>
  <div>
    <div v-if="data.length == 0">暂无数据，快去认识新的用户吧~</div>
    <div
      v-for="item in data"
      class="comment-item"
      @click="$router.push(`/notice/message/${item.user.id}`)"
    >
      <Line />
      <div class="userAvatar">
        <img
          :src="item.user.avatar"
          class="avatar"
          @click.stop="$router.push(`/user/profile/${item.user.id}`)"
        />
        <div style="font-size: 22px">
          <div class="username">{{ item.user.name }}</div>
          <div class="content">{{ item.content }}</div>
        </div>
        <div class="btns">
          <div @click.stop="delchat(item.user.id)">删除</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { deleteMessage, getMessageList } from "@/api/message";
import Line from "@/components/Line.vue";
import { ref } from "vue";
import { useUserStore } from "@/stores/userStore";
import { ElMessage, ElMessageBox } from "element-plus";
const data = ref([]);
const delchat = (targetUserId) => {
  ElMessageBox.confirm("是否删除该聊天记录？", "提示", {
    type: "warning",
  })
    .then(() => {
      deleteMessage({
        targetUserId,
        currentUserId: useUserStore().userInfo.id,
      }).then((res) => {
        if (res.data.success) {
          ElMessage.success("删除成功");
          getData();
        } else {
          ElMessage.error("删除失败");
        }
      });
    })
    .catch(() => {});
};
const getData = () => {
  getMessageList({
    currentUserId: useUserStore().userInfo.id,
  }).then((res) => {
    data.value = res.data.data;
  });
};
getData();
</script>

<style scoped lang="less">
.userAvatar {
  display: flex;
  align-items: center;
  transition: all 0.3s;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    background-color: #ec6149;
    color: #fff;
    .btns {
      color: #fff;
    }
    .content {
      color: #fff;
    }
  }
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;
  }
}
.username {
  margin-right: 20px;
  font-weight: 400;
  font-size: 18px;
}
.articleTitle {
  color: #3194d0;
  cursor: pointer;
}
.content {
  font-size: 14px;
  color: #969696;
}
.btns {
  margin-left: auto;
  color: #969696;
  user-select: none;
  cursor: pointer;
}
</style>
